import { React, useEffect, useState } from 'react'
import { Card, Space, Tabs, List } from 'antd'
import { ipList as presentIp } from '../../ipConfig'

const { TabPane } = Tabs

function RankInFive() {
  const [roomNumberRankInFive, setRoomNumberRankInFive] = useState([
    { name: '', roomnum: 0 },
    { name: '', roomnum: 0 },
    { name: '', roomnum: 0 },
    { name: '', roomnum: 0 },
    { name: '', roomnum: 0 },
  ])
  const [totalRentRankInFive, setTotalRentRankInFive] = useState([
    { name: '', rentalAll: 0, prepaidRental: 0 },
    { name: '', rentalAll: 0, prepaidRental: 0 },
    { name: '', rentalAll: 0, prepaidRental: 0 },
    { name: '', rentalAll: 0, prepaidRental: 0 },
    { name: '', rentalAll: 0, prepaidRental: 0 },
  ])
  const [occupancyRankInFive, setOccupancyRankInFive] = useState([
    { name: '', livedRate: 0 },
    { name: '', livedRate: 0 },
    { name: '', livedRate: 0 },
    { name: '', livedRate: 0 },
    { name: '', livedRate: 0 },
  ])

  useEffect(() => {
    let url = `${presentIp.DEV_IP}/ranking_list`
    fetch(url, {
      headers: {
        token: sessionStorage.getItem('token'),
      },
    })
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        json = json.data
        let forRoomNumber = json.concat([])
        const roomNumberRankInFive = forRoomNumber
          .sort(function (a, b) {
            return b.roomnum - a.roomnum
          })
          .slice(0, 5)
        roomNumberRankInFive.unshift({ name: '酒店名', roomnum: '房间数' })
        setRoomNumberRankInFive(roomNumberRankInFive)
        let forRentalAll = json.concat([])
        const totalRentRankInFive = forRentalAll
          .sort(function (a, b) {
            return b.rentalAll - a.rentalAll
          })
          .slice(0, 5)
        totalRentRankInFive.unshift({
          name: '酒店名',
          rentalAll: '总租金',
          prepaidRental: '已收租金',
        })
        setTotalRentRankInFive(totalRentRankInFive)
        let forLivedRate = json.concat([])
        const occupancyRankInFive = forLivedRate
          .sort(function (a, b) {
            return b.livedRate - a.livedRate
          })
          .slice(0, 5)
        occupancyRankInFive.map(
          (value) =>
            (value.livedRate = (value.livedRate * 100).toFixed(2) + '%')
        )
        occupancyRankInFive.unshift({ name: '酒店名', livedRate: '入住率' })
        setOccupancyRankInFive(occupancyRankInFive)
      })
  }, [])

  return (
    <>
      <Card
        bordered={false}
        style={{
          width: '100%',
          height: '100%',
          padding: 0,
        }}
        bodyStyle={{
          height: '100%',
          padding: 0,
        }}>
        <Space
          style={{
            marginBottom: 24,
          }}></Space>
        <Tabs
          tabPosition="left"
          size="large"
          tabBarGutter={15}
          className="rankTabs">
          <TabPane tab="房间数排名前五" key="1">
            <List
              itemLayout="horizontal"
              size="small"
              dataSource={roomNumberRankInFive}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    style={{
                      width: '50%',
                      textAlign: 'center',
                    }}
                    description={item.name}
                  />
                  <div
                    style={{
                      width: '50%',
                      textAlign: 'center',
                    }}>
                    {item.roomnum}
                  </div>
                </List.Item>
              )}
            />
          </TabPane>
          <TabPane tab="入住率前五" key="2">
            <List
              itemLayout="horizontal"
              size="small"
              dataSource={occupancyRankInFive}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    style={{
                      width: '50%',
                      textAlign: 'center',
                    }}
                    description={item.name}
                  />
                  <div
                    style={{
                      width: '50%',
                      textAlign: 'center',
                    }}>
                    {item.livedRate}
                  </div>
                </List.Item>
              )}
            />
          </TabPane>
          <TabPane tab="租金前五" key="3">
            <List
              itemLayout="horizontal"
              size="small"
              dataSource={totalRentRankInFive}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    style={{
                      width: '40%',
                      textAlign: 'center',
                    }}
                    description={item.name}
                  />
                  <div
                    style={{
                      width: '30%',
                      textAlign: 'center',
                    }}>
                    {item.rentalAll}
                  </div>
                  <div
                    style={{
                      width: '30%',
                      textAlign: 'center',
                    }}>
                    {item.prepaidRental}
                  </div>
                </List.Item>
              )}
            />
          </TabPane>
        </Tabs>
      </Card>
    </>
  )
}

export default RankInFive
